<template>
  <div id="base-project-edit-violate">
    <div class="base-project-edit-violate-frame">
      <div class="base-project-edit-violate-selector" >
        <el-form label-width="100px">
          <el-checkbox-group  v-model="selectedVal" @change="handleChange()">
            <el-checkbox v-for="item in violateOption" :label="item.value" :key="item.value">{{item.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form>
      </div>
      <el-row class="base-project-edit-violate-btnFrame">
        <el-button class="base-project-edit-violate-btn" type="primary" @click="submitForm('editForm')">保存</el-button>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import PcDialog from 'components/dialog';
  import {enums} from '../../../../utils/settings';
  export default{
    props: ['projectInfo'],
    components: {
      PcDialog
    },
    data() {
      return {
        selectedVal: [],
        initForm: JSON.stringify(this.projectInfo),
        editForm: JSON.parse(JSON.stringify(this.projectInfo)),
        violateOption: [
          {
            value: enums.SK_PROJECT_VIOLATE_TYPE.OWNER,
            label: '货主违约'
          }, {
            value: enums.SK_PROJECT_VIOLATE_TYPE.STORAGE,
            label: '冷库违约'
          }
        ]
      };
    },
    created() {
      this.editForm = JSON.parse(JSON.stringify(this.projectInfo));
      // 初始化选择内容
      if (this.editForm.isViolateOwner) {
        this.selectedVal.push(enums.SK_PROJECT_VIOLATE_TYPE.OWNER);
      }
      if (this.editForm.isViolateStorage) {
        this.selectedVal.push(enums.SK_PROJECT_VIOLATE_TYPE.STORAGE);
      }
    },
    computed: {
    },
    methods: {
      // 点击提交按钮
      submitForm() {
        // 内容检查：判断提交前后有无内容变化
        if (this.initForm === JSON.stringify(this.editForm)) {
          this.errorTip('内容没有变化，请确认');
          return;
        }
        var that = this;
        this.ajax({
          type: 'POST',
          url: '/malisk/server/project/updateViolateStatus',
          data: {
            id: that.editForm.id,
            version: that.editForm.version,
            isViolateOwner: that.editForm.isViolateOwner,
            isViolateStorage: that.editForm.isViolateStorage
          },
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              if (that.editForm.isViolateOwner === false && that.editForm.isViolateStorage === false) {
                this.successTip('设置成功，当前暂无违约方。', 2000);
              } else {
                this.successTip('设置违约方成功', 2000);
              }
              that.$emit('sure');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      },
      handleChange () {
        // 重置选择内容
        this.editForm.isViolateOwner = false;
        this.editForm.isViolateStorage = false;
        // 设置选择内容
        this.selectedVal.forEach((item, index) => {
          if (item === enums.SK_PROJECT_VIOLATE_TYPE.OWNER) {
            this.editForm.isViolateOwner = true;
          }
          if (item === enums.SK_PROJECT_VIOLATE_TYPE.STORAGE) {
            this.editForm.isViolateStorage = true;
          }
        });
      }
    }
  };
</script>
<style>
  .base-project-edit-violate-frame {
    width: 100%;
    height: 280px;
    background-color: white;
  }
  .base-project-edit-violate-btnFrame {
    margin-top: 20px;
    text-align: center;
    margin-left:0!important;
  }
  .base-project-edit-violate-btn {
    width: 140px;
    height: 50px;
  }
  .base-project-edit-violate-selector {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    height: 30px;
    margin-top: 10px;
    margin-left: 45px;
    background-color: white
  }
</style>
